<template>
   <div class="common-problem padlr320" v-if="problemList.length">
      <div class="block-tit mar-t60">常见问题</div>
      <div 
        class="problem-li mar-t30 flex "
        v-for="(item, index) in problemList"
        :key="index"
      >
        <div class="li-sort mar-r10">{{ index + 1 }}</div>
        <div class="li-info">
          <div class="info-name">{{ item.title }}</div>
          <div 
            class="info-tips mar-t10"
          >
           <div v-html="item.content"></div>
          </div>
        </div>
      </div>
  </div>
</template>

<script setup>
/**
 * 常见问题
*/
import { ref, defineProps } from "vue"
import serviceApi from "@/api/modules/trademarkService.js"
const props = defineProps({
  service_id: {
    type: String,
    default: ""
  }
})
let problemList = ref([])
const getServiceProblem = () => { 
  serviceApi.serviceProblem({
    service_id: props.service_id
  }).then(res => { 
    problemList.value = res.data
  })
}

getServiceProblem();
</script>

<style lang="scss" scoped>

.block-tit {
  font-size: 28px;
  font-family: PingFang SC, PingFang SC-Medium;
  font-weight: Medium;
  text-align: center;
  color: #202020;
}
.common-problem {
  .problem-li {
    .li-sort {
      width: 20px;
      height: 20px;
      background: #0052d9;
      border-radius: 10px;
      font-size: 14px;
      font-family: PingFang SC, PingFang SC-Semibold;
      font-weight: Semibold;
      text-align: center;
      color: #ffffff;
      line-height: 20px;
    }
    .li-info {
      width: calc(100% - 30px);
      .info-name {
        font-size: 16px;
        font-family: PingFang SC, PingFang SC-Semibold;
        font-weight: Semibold;
        text-align: left;
        color: #202020;
      }
      .info-tips {
        font-size: 14px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: Regular;
        text-align: left;
        color: #646770;
        line-height: 22px;
      }
    }
  }
}
</style>